<template>
	<div class="slo-container">
		
		<!-- slot插槽，当父组件使用本组件时，标签中 的内容会映射到slot插槽标签中 -->
		<!-- slot的name值默认为default -->
		<slot>默认内容，当父组件没有设置映射内容时，本文本就会显示</slot>
		
		<!-- 在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。 -->
		<slot name="slot_01">默认内容（也叫后备内容）</slot>
		
		<!-- 在插槽中加入参数并指定值，可以从父组件中获取，这种叫做作用域插槽 -->
		<slot name="slot_02" msg="hello" :user="userInfo" ></slot>
		
		<slot name="slot_03" msg="hello" :user="userInfo" ></slot>
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				userInfo:{
					id   : '1234',
					name : '5678'
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.slo-container{
		padding: 0 20px 20px;
		background-color: green;
		flex: 1;
	}
</style>